<template>
  <div class="box">
    <div class="search">
      <p class="p">拼单</p>
      <input type="text" placeholder="搜索商品"/>
      <span class="iconfont icon-sousuo"></span>
    </div>
    <div class="nav">
      <div class="juli">
        <div>
          <span class="iconfont icon-wujiaoxing"></span>&nbsp;西安益日假日店GO店
          &lt;
        </div>
        <p>距离您3.3km</p>
      </div>
      <div class="ziqu">
        <a href="#"  @click="getcol1()">自取</a>
        <a href="#" @click="getcol2()">外卖</a>
        <span class="span" :style='{left: lf +"px"}'></span>
      </div>
    </div>
    <div class="desc"> 
           <div class="div">甄选优质马蹄首饰首饰首饰。咳咳手剥新鲜龙眼鲜龙眼</div>  
            <a class="more" href="#" @click='fn()'>更多</a>
        </div>
        <!-- 隐藏部分 -->
        <div v-show='IStrue' class="hide">
             <ul>
               <li><span class="iconfont icon-icon-dengpao"></span>甄选优质马蹄首饰首饰首饰。咳咳手剥新鲜龙眼鲜龙眼</li>
               <li><span class="iconfont icon-icon-dengpao"></span>甄选优质马蹄首饰首饰首饰。咳咳手剥新鲜龙眼鲜龙眼</li>
               <li><span class="iconfont icon-icon-dengpao"></span>甄选优质马蹄首饰首饰首饰。咳咳手剥新鲜龙眼鲜龙眼</li>
             </ul>
             <a href="#">查看食品安全档案  &lt;</a>
             <a href="#">查看冰水检测报告  &lt;</a>
            <h3>配送</h3>
            <p> 满20起送<br>配送费4元(晚上20:00后夜间配送加价)<br>由美团提供配送服务，距门店3kmm范围内起送(配送范围受</p>
            <h3>配送</h3>
            <p> 满20起送<br>配送费4元(晚上20:00后夜间配送加价)<br>由美团提供配送服务，距门店3kmm范围内起送(配送范围受</p>
      </div>
  </div>
</template>

<script>
export default {
  name: "OrderMenu-search",
  data(){
    return{
       IStrue:false,
       lf:0 
       }
  },
  methods:{
    fn(){
      this.IStrue=!this.IStrue;
    },
    getcol1(){
      this.lf=50
    },
    getcol2(){
      this.lf=0
    }
  }
};
</script>


<style scoped>
@import url(../../assets/Menus/iconfont/iconfont.css);
.box {
  width: 375px;
  /* height:1.75rem; */
}
.search, .nav,.desc {
  margin: auto;
  width: 328px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.search .p,input {
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 2px solid #f1f1f1;
  border-radius: 15px;
}
.search .p {
  font-size: 15px;
  font-weight: 600;
}
.search input {
  width: 242px;
  outline: none;
  font-size: 16px;
  color: #f1f1f1;
  background-color: #f5f5f5;
}
.search .icon-sousuo {
  position: absolute;
  top: 5px;
  left: 135px;
  font-size: 20px;
  color: gray;
}
.nav {
  margin: 20px auto 15px;
}
.juli div {
  font-weight: bold;
}
.juli p,
.ziqu a,
.desc .more {
  font-size: 14px;
  color: #534e4e;
}
.juli .icon-wujiaoxing {
  font-size: 20px;
}
.juli p {
  margin-top: 10px;
  font-weight: bold;
}
.ziqu {
  width: 95px;
  height: 30px;
  border: 2px solid #f1f1f1;
  border-radius: 15px;
  display: flex;
  justify-content: space-around;
  position: relative;
  line-height: 30px;
}
.ziqu .span {
  width: 45px;
  height: 30px;
  background-color: black;
  border-radius: 15px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}
.ziqu a:hover {
  color: rgb(238, 231, 231);
}
.desc .div {
  width: 270px;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
/*隐藏部分 */
.hide {
  /* display: none; */
  margin: 20px auto 0;
  width: 328px;
}
.hide ul li {
  margin-bottom: 15px;
  line-height: 20px;
}
.hide h3{margin-top: 20px;}

</style>
